<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>二级菜单</title>
        <link rel="stylesheet" href="css/second_menu.css">
        <style>
            *{
                padding: 0px;
                margin: 0px;
                list-style-type: none;
            }
            a,img{
                border: 0px;
                text-decoration: none;
            }
            body{
                font: 12px/180%;
            }
        </style>
        <script src="./js/tools.js"></script>
        <script>
            window.onload = function(){
                /* 
                    我们的每一个菜单都是一个div
                        当div具有collapsed这个类时，div就是折叠状态
                        当div没有这个类时，div就是展开状态
                        
                    点击菜单，切换菜单的显示状态
                 */

                 //获取所有的class为menuSpan的元素
                var menuSpan = document.querySelectorAll(".menuSpan");

                console.log(menuSpan.length);    
                
                //定义一个变量，保存当前打开的菜单
                var openDiv = menuSpan[0].parentNode;

                //绑定span单击响应函数
                for(var i=0; i<menuSpan.length; i++){
                    menuSpan[i].onclick = function(){
                        //this代表当前点击的span
                        //获取当前span的父元素
                        var  parentDiv = this.parentNode;

                        toggleMenu(parentDiv);

                        //判断openDiv和parentDiv是否相同
                        if(openDiv != parentDiv && !hasClass(openDiv, "collapsed")){
                            //打开菜单以后，应该关闭之前打开的菜单
                            //为了可以统一处理动画过渡效果，我们希望将addClass改为toggleClass;
                            // addClass(openDiv, "collapsed");
                            // 此处toggleClass()不需要有移除功能
                            // toggleClass(openDiv, "collapsed");
                            
                            //切换菜单的显示状态
                            toggleMenu(openDiv);
                        }
                        //修改openDiv 为当前打开的菜单
                        openDiv = parentDiv;

                    };
                }

                //切换菜单的折叠和显示状态
                function toggleMenu(obj){
                    var begin = obj.offsetHeight;

                        //切换parentDiv的显示
                        toggleClass(obj, "collapsed");

                        //在切换类之后，获取一个高度
                        var end = obj.offsetHeight;
                        // console.log(begin+ " "+end);
                        // 动画效果就是将高度从begin向end过渡
                        // 将元素的高度重置为begin
                        obj.style.height = begin + "px";
                        // console.log(parentDiv.style.height);
                        // 执行动画，从begin向end过渡
                        move(obj, "height", end, 10, function(){
                            // 动画执行完毕，内联样式已经没有存在的意义，需删除
                            obj.style.height = "";
                        });
                }
            };

            
        </script>
    </head>
    <body>
        <div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
    </body>
</html>
